<template>
	<div style="margin-top: 20px;">
				<van-grid direction="horizontal" :column-num="3" :gutter="10">
				  <van-grid-item v-for="(item,index) in menu" :key='index' :icon="item.img" :text="item.name" @click="entermenu(index+1,item.name)"/>
				</van-grid>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				menu:[
					{img:'http://img2.3png.com/5b72b5fe9ded1c5b8caf2e8e1e8f91761157.png',name:'mac'},
					{img:'http://img2.3png.com/47106f141780668ec9a86493147e574020fc.png',name:'iPad'},
					{img:'http://img2.3png.com/47106f141780668ec9a86493147e574020fc.png',name:'iPhone'},
					{img:'http://img2.3png.com/f3851a40a15267497c1bb62e138c8ace85cf.png',name:'Watch'},
					{img:'http://img2.3png.com/4493d0cda65936d77500485a36e040030e4c.png',name:'Music'},
					{img:'http://img2.3png.com/93488c2764e550e2a55c2894d26426d03a4a.png',name:'配件'}
				]
			}
		},
		methods:{
			entermenu(id,menuname){
				console.log(id,menuname)
				this.$router.push({path:'/searchcart',query:{id:id,menuname:menuname}})
			}
		}
	}
</script>

<style>
	.van-grid .van-grid-item .van-grid-item__content{
		box-shadow: #39A9ED;
		border-radius: 10px;
	}
</style>
